<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册聊天</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="css/style-1.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>登录聊天</h1>
    <!-- 通过target标签，使得from提交后不会刷新页面，而是把接口返回的内容放入iframe中 -->
    <form action="/login" id="register-form" method="post" target="uploadFrame">
        <input name="username" placeholder="用户名" type="text">
        <input id="password" name="password" placeholder="密码" type="password">
        <span class="error" id="password-error"></span>
        <button class="btn" type="submit">登 录</button>
    </form>
    <iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>
    <div class="point">
        还没有账号吗？ <a href="signup.html">立即注册</a>
    </div>
</div>
<script src="js/register-validation.js" type="text/javascript"></script>
<script type="text/javascript">
    <!--  获取表单提交接口的返回值  -->
    const uploadFrame = document.getElementById("uploadFrame");
    uploadFrame.onload = function () {
        const response = uploadFrame.contentWindow.document.body.innerText;
        const msg = JSON.parse(response);
        // 返回200表示登录成功，跳转到聊天页面
        if (msg.errorCode === 200) {
            // 清空iframe中的内容
            uploadFrame.innerText = "";
            window.location.href = "chat.html";
        } else {
            document.getElementById("password-error").innerText = msg.msg;
        }
    }
</script>
</body>
</html>
